<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">抽奖活动详情</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div style="float: right">
                            <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                            <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                        </div>
                    </div>
                    <el-form :inline="true" ref="search" :model="search" label-width="80px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="名称">{{data.name}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开始时间">{{data.startTime}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="结束时间">{{data.endTime}}</el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="状态">{{data.enable===1?'启用':'禁用'}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="参与人数">{{data.joinTotal}}</el-form-item>
                            </el-col>
                            <!--<el-col :span="8">-->
                                <!--<el-form-item label="领奖人数">{{data.winTotal}}</el-form-item>-->
                            <!--</el-col>-->
                        </el-row>
                    </el-form>
                </el-card>
                <el-button style="margin: 10px 0" v-if="isPermission('lottery:addWin', user.permissions)" @click.native="addWinRecord">添加中奖纪录</el-button>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-table
                            :data="list"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="mock"
                                label="是否假数据"
                                :formatter="formatterMock">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="客户"
                                :formatter="formatterCustomer">
                        </el-table-column>
                        <el-table-column
                                prop="mockCustomerTel"
                                align="center"
                                label="手机号码">
                        </el-table-column>
                        <el-table-column
                                prop="joinTime"
                                label="参加时间"
                                align="center"
                                :formatter="formatterTime"
                                width="130">
                        </el-table-column>
                        <el-table-column
                                prop="win"
                                label="是否中奖"
                                align="center"
                                :formatter="formatterWin">
                        </el-table-column>
                        <el-table-column
                                prop="lotteryItemName"
                                label="奖项">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-button size="small" type="primary" class="el-icon-delete" @click.native.prevent="confirmDelete(row.id)"></el-button>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->
            <el-dialog title="添加中奖记录" v-model="addWinRecordDialog">
                <el-form :model="addWinRecordForm" label-width="120px">
                    <el-form-item label="用户手机号">
                        <el-input v-model="addWinRecordForm.customerName" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="奖项">
                        <el-select placeholder="请选择奖项" filterable v-model="addWinRecordForm.prize">
                            <template v-for="item in data.itemsList">
                                <el-option v-if="item.type !== 3" :label="item.name" :value="item.id"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button :disabled="addWinBtnEnable" type="primary" @click="saveAddWin">保存</el-button>
                        <el-button :disabled="addWinBtnEnable" @click="cancelAddWin">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                addWinBtnEnable: false,
                addWinRecordDialog: false,
                addWinRecordForm: {
                    customerName: '',
                    prize: ''
                },
                data: {
                    id: ${(id)!'0'}
                },
                list: [],
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                search: {},
                luckList: [],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0
            }
        },
        mounted: function () {
            this.getData()
            this.getList()
        },
        methods: {
            delete (id) {
                let that = this
                this.$get('/lottery/deleteRecord?id=' + id,null,function (res) {
                    if(res.status === 200){
                        that.getList()
                    }else{
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            confirmDelete (id) {
                let that = this;
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.delete(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            formatterWin(row){
                if (row.win === 1) {
                    return '是'
                } else if (row.win === 0) {
                    return '否'
                }
            },
            formatterTime (row, column) {
                if (row.joinTime !== undefined && (row.joinTime + "").length >= 10) {
                    return (row.joinTime + "").substring(0, 10);
                } else {
                    return row.joinTime;
                }
            },
            formatterCustomer(row){
                if (row.name !== undefined) {
                    return row.name
                } else if (row.mockCustomerName !== undefined) {
                    return row.mockCustomerName
                }
            },
            formatterMock(row){
               if (row.mockCustomerName !== undefined) {
                    return '是';
               } else {
                   return "否";
               }
            },
            addWinRecord () {
                this.addWinRecordForm.customerName = ''
                this.addWinRecordForm.prize = ''
                this.addWinRecordDialog = true
            },
            saveAddWin () {
                let that = this
                let obj = {}
                obj.customerName = this.addWinRecordForm.customerName
                obj.activityId = this.data.id
                obj.lotteryItemId = this.addWinRecordForm.prize
                obj.win = 1
                this.http('/lottery/record/insert',obj,function (res) {
                    if(res.status === 200){
                        that.getList()
                        that.addWinRecordDialog = false
                    }else{
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            cancelAddWin () {
                this.addWinRecordDialog = false
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
                this.getList()
            },
            getData () {
                let that = this
                let obj = {}
                obj.id = this.data.id
                this.http('/lottery/detail',obj,function (res) {
                    if(res.status === 200){
                        that.data = res.data.detail.returnValue
                    }else{
                        that.$alert(res.errMsg, '提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getList () {
                let that = this
                let obj = {}
                obj.currentPage = this.currentPage
                obj.pageSize = this.pageSize
                obj.id = this.data.id
                this.http('/lottery/record/list',obj,function (res) {
                    if(res.status === 200){
                        that.list = res.data.list
                        that.totalCount = res.data.total;
                    }else{
                        that.$alert(res.errMsg, '提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>